<template>
  <div>
    <a-card>
      <a-row>
        <a-col :span="12" class="item left">
          {{ $t('key.bindEmail') }}
        </a-col>
        <a-col :span="12" class="item right">
          {{ userData.loginDzxx && userData.loginDzxx }}
          <a-tag color="green" @click="emailVisible=true" v-if="userData.loginDzxx">{{ $t('key.bindAlready') }}</a-tag>
          <a-tag color="orange" @click="emailVisible=true" v-if="!userData.loginDzxx">{{ $t('key.unbind') }}</a-tag>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12" class="item left">
          {{ $t('key.bindMobile') }}
        </a-col>
        <a-col :span="12" class="item right">
          {{ userData.loginLxdh && userData.loginLxdh }}
          <a-tag color="green" @click="mobileVisible=true" v-if="userData.loginLxdh">{{ $t('key.bindAlready') }}</a-tag>
          <a-tag color="orange" @click="mobileVisible=true" v-if="!userData.loginLxdh">{{ $t('key.unbind') }}</a-tag>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12" class="item left">
          {{ $t('key.bindWechat') }}
        </a-col>
        <a-col :span="12" class="item right">
          <a-tag color="green" @click="wechatVisible=true" v-if="userData.wechatOpenId">{{ $t('key.bindAlready') }}</a-tag>
          <a-tag @click="wechatVisible=true" color="orange" v-if="!userData.wechatOpenId">{{ $t('key.unbind') }}</a-tag>
        </a-col>
      </a-row>
    </a-card>
    <add-email-modal
            ref="add"
            :visible="emailVisible"
            @cancel="emailVisible = false"
            @reload="reload()"
    />
    <add-mobile-modal
            ref="add"
            :visible="mobileVisible"
            @cancel="mobileVisible = false"
            @reload="reload()"
    />
    <add-wechat-modal
            ref="add"
            :visible="wechatVisible"
            @cancel="wechatVisible = false"
            @reload="reload()"
    />
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import addEmailModal from './components/addEmailModal'
  import addMobileModal from './components/addMobileModal'
  import addWechatModal from './components/addWechatModal'

  export default {
    props: {},
    components: {addEmailModal, addMobileModal, addWechatModal},
    computed: {
      ...mapState({
        user: state => state.account.user,
      })
    },
    created() {
      this.reload();
    },
    data() {
      return {
        IMG_URL: process.env.IMG_URL,
        emailVisible: false,
        mobileVisible: false,
        wechatVisible: false,
        userData: {}
      }
    },
    methods: {
      reload() {
        this.$api.student.teacherInfo2(this.user.id).then(res => {
          console.info("usreData", res.data)
          this.userData = res.data
        })
      }
    }
  }
</script>

<style>
  .item {
    padding: 5px;
  }

  .left {
    text-align: left;
  }

  .right {
    text-align: right;
  }
</style>
